<template>
  <div class="common-layout">
    <el-container class="qwe">、

      <!-- 侧边栏 -->
      <el-aside  style=" width:200px;min-height: 100vh; background-color: #001529; ">
        <div style="height: 60px;  color: white; display:flex; align-items: center; justify-content: center;">
         <span >宿舍信息管理系统</span>
        </div>

        <el-menu router background-color="#001529" text-color="rgba(255,255,255, 0.65)" active-text-color="#fff" style="border: none;" :default-active="$route.path"> 
          <el-menu-item index="/">
            <template #title>
              <el-icon><house /></el-icon>
              <span>系统管理</span>
            </template>
          </el-menu-item>


          <el-sub-menu index="2"> 
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>宿舍管理</span>
            </template>
            <el-menu-item @click="$router.push('/dor')">宿舍信息管理</el-menu-item>
            <el-menu-item @click="$router.push('/stu')">学生信息管理</el-menu-item>
          </el-sub-menu>          
        </el-menu>
      </el-aside>

      <el-container >
       
        <el-header style="background: #fff; height: 60px; ">
                <el-icon><Location /></el-icon>
               
                <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end;"> 
                  <el-dropdown>
                            <span class="el-dropdown-link">
                            <img src="https://img.alicdn.com/imgextra/i4/O1CN01aG16y424E11XsURUd_!!6000000007358-2-tps-206-240.png" alt="" style="width: 40px; height: 40px; height: 40px;">
                            </span>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item @click="$router.push('/user')">个人中心</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>       
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
              </div>
        </el-header>
        <el-main style="background: #fff;">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  
  </div >
</template>

<script>


</script>


<style scoped>
.qwe{
  width: 100vw;
  height: 100vh;
}

.el-header {
  border-bottom: 1px solid #ccc; /* 边框样式 */
  box-shadow: var(--el-box-shadow-dark); /* 阴影样式 */
  padding: 20px;
  background-color: white;
}


  .el-menu--inline .el-menu-item {
    background-color: #000c17 !important;
  }

  .el-menu-item:hover,.el-sub-menu__title:hover {
    color: #fff !important;
  }

  .el-menu-item.is-active {
    background-color: #409eff !important;
    border-radius: 5px !important;
    margin: 4px !important;
  }

  .el-header{
    box-shadow: 2px 0 6px rgba(0,21,41,.35 green, blue, alpha);
    display: flex;
    align-items: center;
  }

  .example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


</style>


